<template>
  <div class="pbox">
    <Box title="安全检测">
      <div class="content">
        <div class="bj">
          <div class="bjBox cgq">
            <div class="bjBoxSon">
              <div class="box1"></div>
            </div>
            <div class="name">传感器数量</div>
            <div>
              <span class="nums lan">{{ cgqNum }}</span>
              <span class="dw lan">个</span>
            </div>
          </div>
          <div class="bjBox bjsl">
            <div class="bjBoxSon">
              <div class="box2"></div>
            </div>
            <div class="name">报警数量</div>
            <div>
              <span class="nums hong">{{ bjNum }}</span>
              <span class="dw hong">次</span>
            </div>
          </div>
        </div>
        <VirtualList
          :data="data"
          :item-height="30"
          :container-height="150"
          :columns="columns"
        >
          <template #default="{ item }">
            <!-- 自定义列表项内容 -->
            <div>{{ item.mkname }}</div>
          </template>
        </VirtualList>
      </div>
    </Box>
  </div>
</template>
<script setup>
import Box from "@/components/Box/index.vue";
import VirtualList from "@/components/List/index.vue";
import { reactive, ref } from "vue";
const cgqNum = ref(60);
const bjNum = ref(70);
const columns = reactive([
  {
    key: "mkname",
    dataKey: "mkname",
    title: "煤矿名称",
    width: 100,
    align: "center",
  },
  {
    key: "sysname",
    dataKey: "sysname",
    title: "系统名称",
    width: 200,
    align: "center",
  },
  {
    key: "status",
    dataKey: "status",
    title: "状态",
    width: 100,
    align: "center",
  },
  {
    key: "jgtime",
    dataKey: "jgtime",
    title: "间隔时间",
    width: 190,
    align: "center",
  },
  {
    key: "loadtime",
    dataKey: "loadtime",
    title: "上传时间",
    width: 190,
    align: "center",
  },
  {
    key: "users",
    dataKey: "users",
    title: "责任人",
    width: 100,
    align: "center",
  },
]);

const data = ref([
  {
    mkname: "大同煤矿",
    sysname: "安全监测系统",
    status: "正常运行",
    jgtime: "30分钟",
    loadtime: "2023-05-15 08:30:00",
    users: "张三",
  },
  {
    mkname: "阳泉煤矿",
    sysname: "人员定位系统",
    status: "维护中",
    jgtime: "60分钟",
    loadtime: "2023-05-15 09:15:00",
    users: "李四",
  },
  {
    mkname: "西山煤矿",
    sysname: "瓦斯监测系统",
    status: "正常运行",
    jgtime: "15分钟",
    loadtime: "2023-05-15 10:00:00",
    users: "王五",
  },
  {
    mkname: "汾西煤矿",
    sysname: "设备管理系统",
    status: "故障",
    jgtime: "45分钟",
    loadtime: "2023-05-15 11:20:00",
    users: "赵六",
  },
  {
    mkname: "霍州煤矿",
    sysname: "产量统计系统",
    status: "正常运行",
    jgtime: "20分钟",
    loadtime: "2023-05-15 13:45:00",
    users: "钱七",
  },
  {
    mkname: "晋城煤矿",
    sysname: "通风监测系统",
    status: "维护中",
    jgtime: "90分钟",
    loadtime: "2023-05-15 14:30:00",
    users: "孙八",
  },
  {
    mkname: "潞安煤矿",
    sysname: "排水监控系统",
    status: "正常运行",
    jgtime: "25分钟",
    loadtime: "2023-05-15 15:10:00",
    users: "周九",
  },
  {
    mkname: "华晋煤矿",
    sysname: "电力监控系统",
    status: "故障",
    jgtime: "50分钟",
    loadtime: "2023-05-15 16:25:00",
    users: "吴十",
  },
  {
    mkname: "平朔煤矿",
    sysname: "运输管理系统",
    status: "正常运行",
    jgtime: "35分钟",
    loadtime: "2023-05-15 17:05:00",
    users: "郑十一",
  },
  {
    mkname: "轩岗煤矿",
    sysname: "环境监测系统",
    status: "维护中",
    jgtime: "75分钟",
    loadtime: "2023-05-15 18:40:00",
    users: "王十二",
  },
]);
</script>
<style scoped>
.pbox {
  flex: 1;
}
.rightBtn {
  display: flex;
  gap: 10px;
}
.content {
  width: 100%;
  height: 100%;
}
.tables {
  background-color: #00000000;
}
:deep(.tables .el-table-v2__main) {
  background-color: #00000000;
}
:deep(.tables .el-table-v2__header-cell) {
  background-color: #00000000;
}
:deep(.tables .el-table-v2__header-row) {
  border: none;
}
.bj {
  display: flex;
}
.bjBox {
  flex: 1;
}
.cgq {
  display: flex;
}
.bjsl {
  display: flex;
}
.box1 {
  background-image: url("/layout/jqr.png");
}
.box2 {
  background-image: url("/layout/dian.png");
}
.bjBox>div{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bjBoxSon {
  background-image: url("/layout/zryn1.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 50px;
  height: 50px;
}
.bjBoxSon > div {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}
.lan{
    background-image: linear-gradient(to bottom, #4ec4e8, #ffffff);
}
.hong{
    background-image: linear-gradient(to bottom, #eb0909, #ffffff);
}
.nums,.dw{

  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  -webkit-background-clip: text;
  color: transparent;
}
.dw{
    font-size: 10px;
}
.name{
    font-family: Arial, Helvetica, sans-serif;
    font-family: 16px;
}
</style>
